<template>
  <div class="news-list-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="activityName"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    >
      <!-- 微信授权状态指示器（开发调试用） -->
      <template #right>
        <div class="wechat-status" v-if="false">
          <span v-if="wechatVerified" class="status-dot success">✓</span>
          <span v-else class="status-dot error">✗</span>
        </div>
      </template>
    </van-nav-bar>
    
    <!-- 资讯列表 -->
    <div class="news-content">
      <div class="news-list">
        <div
          v-for="item in newsList"
          :key="item.id"
          class="news-item"
          @click="goToDetail(item)"
        >
          <div class="news-header">
            <div class="news-title">
              <span v-if="item.is_top" class="top-tag">置顶</span>
              {{ item.title }}
            </div>
            <div class="news-time">{{ item.publish_date_format }}</div>
          </div>
          <div class="news-preview">
            {{ getContentPreview(item.content) }}
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <van-empty
        v-if="!loading && newsList.length === 0"
        description="暂无资讯"
        image="search"
      />
      
      <!-- 加载状态 -->
      <van-loading
        v-if="loading"
        type="spinner"
        size="24px"
        class="loading-center"
      >
        加载中...
      </van-loading>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getH5NewsList } from '@/api/activity/index'

export default {
  name: 'NewsList',
  data() {
    return {
      loading: false,
      activityId: '',
      activityName: '',
      newsList: []
    }
  },
  mounted() {
    this.activityId = this.$route.query.activity_id || ''
    this.activityName = decodeURIComponent(this.$route.query.activity_name || '')
    
    // 获取资讯列表
    this.getNewsList()
  },
  methods: {
    
    // 获取资讯列表
    async getNewsList() {
      if (!this.activityId) {
        Toast('活动ID不能为空')
        return
      }
      
      this.loading = true
      try {
        const response = await getH5NewsList({
          activity_id: this.activityId
        })
        
        if (response.result) {
          this.newsList = response.data || []
        } else {
          Toast(response.msg || '获取资讯列表失败')
        }
      } catch (error) {
        console.error('获取资讯列表失败:', error)
        Toast('网络错误，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    
    // 获取内容预览
    getContentPreview(content) {
      if (!content) return ''
      // 去除HTML标签
      const text = content.replace(/<[^>]*>/g, '')
      // 限制长度
      return text.length > 100 ? text.substring(0, 100) + '...' : text
    },
    
    // 跳转到详情页
    goToDetail(item) {
      this.$router.push({
        path: '/activity/news-detail',
        query: {
          id: item.id,
          activity_id: this.activityId,
          activity_name: this.$route.query.activity_name
        }
      })
    },
    
    // 返回上一页
    onClickLeft() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.news-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.news-content {
  padding: 16px;
  padding-top: 0;
}

.news-list {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.news-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item:active {
  background-color: #f8f8f8;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.news-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-right: 12px;
}

.top-tag {
  display: inline-block;
  background: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

.news-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-preview {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

/* 导航栏样式 */
.news-list-page >>> .van-nav-bar {
  background: white;
}

.news-list-page >>> .van-nav-bar__title {
  color: #333;
  font-weight: 500;
}

.news-list-page >>> .van-nav-bar__text {
  color: #333;
}

.news-list-page >>> .van-nav-bar .van-icon {
  color: #333;
}

/* 微信授权状态指示器 */
.wechat-status {
  padding: 0 12px;
}

.status-dot {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.status-dot.success {
  color: #07c160;
}

.status-dot.error {
  color: #ee0a24;
}
</style>
